<template>
  <div class="card">
    <p>count变成7时，将会出现弹窗，只出现一次</p>
    <p>Count: {{ count }}</p>
    <button @click="inc()">+1</button>
    <button @click="dec()">-1</button>
  </div>
</template>

<script setup>
/**
 * until https://vueuse.org/shared/until/
 * until: 知道什么什么情况下 干什么样的事
 *
 * invoke: 就是一个包装函数 方便在 script setup中使用 async await
 *  const invoke = fn => fn()
 *
 * useCounter: 累加器方法 https://vueuse.org/shared/useCounter/
 */
import { until, invoke, useCounter } from '@vueuse/core';

const { count, inc, dec } = useCounter(2);

// invoke(async () => {
//   await until(count).toBeTruthy();
//   alert('存在');
// });
//
// invoke(async () => {
//   // 没有任何参数 直到条件成立 下面的代码才会执行
//   await until(count).toBe(7);
//   alert('You got 7!');
// });
//
// invoke(async () => {
//   // 给条件成立设定一个时间 规定五秒内如果条件不成立 下面的代码会继续执行
//   await until(count).toBe(5, {
//     timeout: 3000,
//   });
//   alert('You got 5!');
// });
//
// invoke(async () => {
//   try {
//     // throwOnTimeout 规定的时间内如果条件没有成立 将抛出错误
//     await until(count).toBe(10, {
//       timeout: 8000,
//       throwOnTimeout: true,
//     });
//     alert('You got 10，在规定的时间内点按钮变成了10');
//   } catch (err) {
//     console.log('You got 10 超时了', err);
//   }
// });

/**
 * 更多例子 until和单元测试中的方法很像
 * await until(ref).toBe(10) => toBe内部使用 === 判断是否符合条件
 * await until(ref).toMatch(v => v > 10 && v < 100) => 传入一个函数用来判断条件是否成立
 * await until(ref).changed() => 值是否被更新了 更新了触发 默认change一次即触发
 * await until(ref).changedTimes(10) => changed的变体只是changed更新一次就会被触发 changedTimes可以接受被change的次数
 * await until(ref).toBeTruthy() => toBeTruthy内部使用 Boolean方法转换值后，判断是否成立
 * await until(ref).toContains(10) => 和数组的includes类似，其底层也是这么实现的
 * await until(ref).toBeNull()
 * await until(ref).not.toBeNull()
 * await until(ref).not.toBeTruthy()
 */
</script>

<style></style>
